<template>
    <div class="person">
        <van-nav-bar fixed :title="$route.meta.title" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
        <router-view class="person-route-view" v-slot="{ Component }">
            <transition :name="viewTransition">
                <component :is="Component" />
            </transition>
        </router-view>
    </div>
</template>
<script>
export default {
    data () {
        return {
            transitionName: "",
        };
    },
    mounted () {
    },
    methods: {
        onClickLeft () {
            this.$router.back()
        },
        onClickRight () {
            console.log('按钮');
        },
        doafter () {
            // console.log("after");
        },
        dobefore () {
            console.log("before");
        }
    },
    computed: {
        direction () {
            return this.$store.state.direction;
        },
        viewTransition () {
            let direction = this.direction;
            return "app-pop-" + (direction === "forward" ? 'in' : 'out');
        },
    },
};
</script>

<style lang="less" scoped>
.person {
    height: 100%;
    padding-top: 56px;
    /deep/.van-nav-bar {
        &.van-nav-bar--fixed{
            z-index: 1000;
        }
        padding-top: 10px;
        background: #000;
        max-width: 640px;
        left:50%;
        transform: translateX(-50%);
        .van-nav-bar__content {
            color: #fff;
            .van-nav-bar__left {
                .van-icon {
                    color: #fff;
                    font-size: 22px;
                }
            }
            .van-nav-bar__title {
                font-weight: bold;
                color: #fff;
            }
        }
        &.van-hairline--bottom::after {
            border-width: 0;
        }
    }
}
</style>